Vuex Quick Start Guide by Andrea Koutifaris

Author:Andrea Koutifaris
Language: eng
Format: epub
Tags: COM060080 - COMPUTERS / Web / General, COM060160 - COMPUTERS / Web / Web Programming, COM060180 - COMPUTERS / Web / Web Services and APIs
Publisher: Packt
Published: 2018-04-04T13:39:02+00:00

Using vue-loader for single-file components

Vue.js provides a webpack loader, vue-loader, to transform single-file components into JavaScript modules. To install vue-loader and related tools, type the following commands into a console:

npm install --save-dev vue-loader

npm install --save-dev vue-template-compiler

npm install --save-dev vue-style-loader

npm install --save-dev css-loader

npm install --save-dev file-loader

The file-loader is needed to import external files, such as images. The other packages are needed to tell webpack how to build all the pieces inside the .vue file.

Let's update webpack.config.js to use single-file components that will have a file extension of .vue:

// ...

const config = {

// ...

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader'

},

{

test: /\.css$/,

use: [

'vue-style-loader',

'css-loader'

]

},

{

test: /\.(png|jpg|jpeg|gif|svg)$/,

loader: 'file-loader',

options: {

name: '[name].[ext]?[hash]'

}

}

]

},

resolve: {

alias: {

vue$: 'vue/dist/vue.esm.js',

},

},

// ...

};

// ...

Within the rules section inside the configuration, we tell webpack which loader to use when a file is imported inside a source file. In the preceding code, we configured webpack to use vue-loader for every .vue file, css-loader, and vue-style-loader for .css files, and file-loader for images.

In order to test that everything has been correctly configured, we will create an app.vue file:

// src/app.vue

<template>

<div class="app">App <span class="version">v{{version}}</span></div>

</template>

<script>

export default {

computed: {

version() {

return this.$store.state.version;

}

}

};

</script>

<style>

.app {

font-family: "Times New Roman", Times, serif;

background-image: url("./background.jpg");

}

</style>

You need a background.jpg file to build the preceding file. It is enough to put any image within the src folder and rename it as background.jpg.

This file uses Vuex.Store, the three parts of a Vue single-file component—<template>, <script>, and <style>—and an image as the background. This way, we are going to test vue-loader and its related packages, Vuex.Store, and file-loader for the background image.

Let's now update main.js to use app.vue:

// src/main.js

import Vue from 'vue';

import Vuex from 'vuex';

import app from './app.vue';

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.